<template>
	<view class="i-rate">
		<view class="imgList" v-if="oneStart">
			<image :style="{width: size, height: size, margin}" src="../../static/images/star_icon.png" mode=""
				v-for="(item, index) in start" :key="index" @click="handleAdd(index)"></image>
			<image :style="{width: size, height: size, margin}" src="../../static/images/star_icon1.png" mode=""
				v-for="(item, index) in 5 - start" :key="index" @click="handleC(index)">
			</image>
		</view>
		<view class="imgList" v-else>
			<image :style="{width: size, height: size, margin}"  src="../../static/images/star_icon.png" mode=""></image>
		</view>
		<text v-if="num" class="rate_text">{{rateValue}}</text>
	</view>
</template>

<script lang="ts" setup>
	import { ref, defineProps, computed, defineEmits } from 'vue'
	const props = defineProps({
		edit: {
			type: Boolean,
			default: false
		},
		rate: {
			type: Number,
			default: 0
		},
		size: {
			type: String,
			default: '24rpx'
		},
		margin: {
			type: String,
			default: '0 2rpx'
		},
		num: {
			type: Boolean,
			default: true
		},
		oneStart: {
			type: Boolean,
			default: true
		},
	})

	const rateValue = ref(0)
	const emit = defineEmits(['change'])
	rateValue.value = props.rate

	const start = computed(() => {
		return Math.ceil(rateValue.value)
	})

	const onChange = () => {
		emit('change', rateValue.value)
	}

	const handleAdd = (i : number) => {
		if (props.edit) {
			rateValue.value = i < 5 ? i + 1 : 5
			onChange()
		}

	}
	const handleC = (i : number) => {
		if (props.edit) {
			rateValue.value += i + 1
			onChange()
		}
	}
</script>

<style lang="scss" scoped>
	.i-rate {
		@include flexR;

		.rate_text {
			margin-left: 6rpx;
			@include dprice(28rpx);
			color: #FB652E;
		}

		.imgList {
			@include flexR;

			image {}
		}
	}
</style>